<template>
  <div>
    <div class="top1"> 

      <el-button type="primary" @click="add()">创建角色</el-button>
      
    </div>
    <div >
      <div style="background-color: #f6f7fb; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;">
        <el-row :gutter="20" class="row1" style="margin-top: 20px;">
          <el-col :span="4"><div class="grid-content bg-purple1">我用过的</div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">
            <el-row :gutter="20"  v-if="usedDate.length > 0">
              <el-col :span="8" v-for="(item, index) in usedDate" :key="index" >
                <div class="grid-content bg-purple">
                    <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: antiquewhite; cursor: pointer;" >
                      <el-row :gutter="20"     style="display: flex;align-items: center; font-size: 12px; ">
                        <el-col :span="6"><div class="grid-content bg-purple">
                          <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.virtuallyImage "></el-image>
                        </div></el-col>
                        <el-col :span="18"><div class="grid-content bg-purple-light">
                          <div slot="header" class="clearfix">
                            <span @click="changeV(item.id)">{{item.virtuallyName}}</span>
                          </div>
                          <div class="categoryDescribe1" @click="changeV(item.id)">
                            {{item.personalSignature }}
                          </div>  
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <!-- 当list为空时显示的自定义内容 -->
              <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: antiquewhite; cursor: pointer; display: flex;
              justify-content: center;
              align-items: center" >
                  <div>已经加载完喽</div>
              </el-card>
            </div>
            
          </div></el-col>
        </el-row>
      </div>
      <div style="background-color: #f6f7fb; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;">
        <el-row :gutter="20" class="row1" style="margin-top: 20px;">
          <el-col :span="4"><div class="grid-content bg-purple1">我创建的</div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">
            <el-row :gutter="20"  v-if="myCreateDate.length > 0">
              <el-col :span="8" v-for="(item, index) in myCreateDate" :key="index" >
                <div class="grid-content bg-purple">
                    <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: antiquewhite; cursor: pointer;" >
                      <el-row :gutter="20"     style="display: flex;align-items: center; font-size: 12px; ">
                        <el-col :span="6"><div class="grid-content bg-purple">
                          <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.virtuallyImage "></el-image>
                        </div></el-col>
                        <el-col :span="18"><div class="grid-content bg-purple-light">
                          <div slot="header" class="clearfix">
                            <span @click="changeV(item.id)">{{item.virtuallyName}}</span>
                          </div>
                          <div class="categoryDescribe1" @click="changeV(item.id)">
                            {{item.personalSignature }}
                          </div>  
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <!-- 当list为空时显示的自定义内容 -->
              <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: antiquewhite; cursor: pointer; display: flex;
              justify-content: center;
              align-items: center" >
                  <div>已经加载完喽</div>
              </el-card>
            </div>
            
          </div></el-col>
        </el-row>
      </div>
      <div style="background-color: #f6f7fb; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;">
        <el-row :gutter="20" class="row1" style="margin-top: 20px;">
          <el-col :span="4"><div class="grid-content bg-purple1">最近创建</div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">
            <el-row :gutter="20"  v-if="lastCreateDate.length > 0">
              <el-col :span="8" v-for="(item, index) in lastCreateDate" :key="index" >
                <div class="grid-content bg-purple">
                    <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: antiquewhite; cursor: pointer;" >
                      <el-row :gutter="20"     style="display: flex;align-items: center; font-size: 12px; ">
                        <el-col :span="6"><div class="grid-content bg-purple">
                          <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.virtuallyImage "></el-image>
                        </div></el-col>
                        <el-col :span="18"><div class="grid-content bg-purple-light">
                          <div slot="header" class="clearfix">
                            <span @click="changeV(item.id)">{{item.virtuallyName}}</span>
                          </div>
                          <div class="categoryDescribe1" @click="changeV(item.id)">
                            {{item.personalSignature }}
                          </div>  
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <!-- 当list为空时显示的自定义内容 -->
              <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: antiquewhite; cursor: pointer; display: flex;
              justify-content: center;
              align-items: center" >
                  <div>已经加载完喽</div>
              </el-card>
            </div>
            
          </div></el-col>
        </el-row>
      </div>
      <div style="background-color: #f6f7fb; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;">
        <el-row :gutter="20" class="row1" style="margin-top: 20px;">
          <el-col :span="4"><div class="grid-content bg-purple1">历史人物</div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">
            <el-row :gutter="20"  v-if="historyDate.length > 0">
              <el-col :span="8" v-for="(item, index) in historyDate" :key="index" >
                <div class="grid-content bg-purple">
                    <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: antiquewhite; cursor: pointer;" >
                      <el-row :gutter="20"     style="display: flex;align-items: center; font-size: 12px; ">
                        <el-col :span="6"><div class="grid-content bg-purple">
                          <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.virtuallyImage "></el-image>
                        </div></el-col>
                        <el-col :span="18"><div class="grid-content bg-purple-light">
                          <div slot="header" class="clearfix">
                            <span @click="changeV(item.id)">{{item.virtuallyName}}</span>
                          </div>
                          <div class="categoryDescribe1" @click="changeV(item.id)">
                            {{item.personalSignature }}
                          </div>  
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <!-- 当list为空时显示的自定义内容 -->
            </div>
            
          </div></el-col>
        </el-row>
      </div>
      <div style="background-color: #f6f7fb; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;">
        <el-row :gutter="20" class="row1" style="margin-top: 20px;">
          <el-col :span="4"><div class="grid-content bg-purple1">动漫人物</div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">
            <el-row :gutter="20" v-if="cartoonDate.length > 0">
              <el-col :span="8" v-for="(item, index) in cartoonDate" :key="index" >
                <div class="grid-content bg-purple">
                    <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: aquamarine; cursor: pointer;">
                      <el-row :gutter="20"   style="display: flex;align-items: center; font-size: 12px; ">
                        <el-col :span="6"><div class="grid-content bg-purple">
                          <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.virtuallyImage "></el-image>
                        </div></el-col>
                        <el-col :span="18"><div class="grid-content bg-purple-light">
                          <div slot="header" class="clearfix">
                            <span @click="changeV(item.id)">{{item.virtuallyName}}</span>
                          </div>
                          <div class="categoryDescribe1" @click="changeV(item.id)">
                            {{item.personalSignature }}
                          </div>  
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <!-- 当list为空时显示的自定义内容 -->
            </div>
            
          </div></el-col>
        </el-row>
      </div>

      <div style="background-color: #f6f7fb; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;">
        <el-row :gutter="20" class="row1" style="margin-top: 20px;">
          <el-col :span="4"><div class="grid-content bg-purple1">小说人物</div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">
            <el-row :gutter="20" v-if="novelDate.length > 0">
              <el-col :span="8" v-for="(item, index) in novelDate" :key="index" >
                <div class="grid-content bg-purple">
                    <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: darkcyan; cursor: pointer;" >
                      <el-row :gutter="20"   style="display: flex;align-items: center; font-size: 12px; ">
                        <el-col :span="6"><div class="grid-content bg-purple">
                          <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.virtuallyImage "></el-image>
                        </div></el-col>
                        <el-col :span="18"><div class="grid-content bg-purple-light">
                          <div slot="header" class="clearfix">
                            <span @click="changeV(item.id)">{{item.virtuallyName}}</span>
                          </div>
                          <div class="categoryDescribe1" @click="changeV(item.id)">
                            {{item.personalSignature }}
                          </div>  
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <!-- 当list为空时显示的自定义内容 -->
            </div>
            
          </div></el-col>
        </el-row>
      </div>


      <div style="background-color: #f6f7fb; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;">
        <el-row :gutter="20" class="row1" style="margin-top: 20px;">
          <el-col :span="4"><div class="grid-content bg-purple1">其他人物</div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">
            <el-row :gutter="20" v-if="otherDate.length > 0">
              <el-col :span="8" v-for="(item, index) in otherDate" :key="index" >
                <div class="grid-content bg-purple"> 
                    <el-card class="box-card" style="height: 90px;margin-top: 5px; background-color: blanchedalmond; cursor: pointer;">
                      <el-row :gutter="20"   style="display: flex;align-items: center; font-size: 12px; ">
                        <el-col :span="6"><div class="grid-content bg-purple">
                          <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.virtuallyImage "></el-image>
                        </div></el-col>
                        <el-col :span="18"><div class="grid-content bg-purple-light">
                          <div slot="header" class="clearfix">
                            <span @click="changeV(item.id)">{{item.virtuallyName}}</span>
                          </div>
                          <div class="categoryDescribe1" @click="changeV(item.id)">
                            {{item.personalSignature }}
                          </div>  
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <!-- 当list为空时显示的自定义内容 -->
            </div>
            
          </div></el-col>
        </el-row>
    </div>





    </div>
        <div>
            <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="50%" >
                <el-form :model="form">
                  <el-form-item label="角色库" label-width="15%">
                    <el-select v-model="form.virtuallyType" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="角色头像" label-width="15%">
                    <el-upload action="http://localhost:8080/api/files/upload" :on-success="successUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                
                  <el-form-item label="角色名称" label-width="15%">
                    <el-input v-model="form.virtuallyName" placeholder="角色名称，如：贾宝玉" style="width: 90%"></el-input>
                  </el-form-item>
                  <el-form-item label="角色性别" label-width="15%">
                    <el-radio v-model="form.virtuallySex" label="1">男</el-radio>
                    <el-radio v-model="form.virtuallySex" label="2">女</el-radio>
                  </el-form-item>
                  <el-form-item label="个性签名" label-width="15%">
                    <el-input v-model="form.personalSignature" placeholder="代表人物性格的一句话或者口头禅" style="width: 90%"></el-input>
                  </el-form-item>
                  <el-form-item label="角色简介" label-width="15%">
                    <el-input
                      type="textarea"
                      :rows="4"
                      placeholder="如贾宝玉：【中国古典名著《红楼梦》中的男主角。前世真身为赤霞宫神瑛侍者，荣国府贾政与王夫人所生的次子。因衔通灵宝玉而诞，系贾府玉字辈嫡孙，故名贾宝玉，贾府称宝二爷。】"
                      v-model="form.virtuallyIntro"
                      style="width: 90%">
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">创建</el-button>

                </div>
            </el-dialog>
        </div>
        <div>
          <el-dialog title="当前虚拟角色信息" :visible.sync="changeVu" width="50%" >
            <div >
              <div style="font-size: 16px;color: #333;"> 头像：</div>
              <el-image  class="image18"  :src="'http://localhost:8080/api/files/'+virtuallyCharacter.virtuallyImage " >
                <i class="el-icon-picture-outline"></i>
              </el-image>
              <div style="font-size: 16px;color: #333;"> 角色名称：<div style="font-size: 14px; margin-left: 20px;">{{virtuallyCharacter.virtuallyName}}</div></div>
              <div style="font-size: 16px;color: #333;">个性签名: <div style="font-size: 14px; margin-left: 20px;">{{ virtuallyCharacter.personalSignature }}</div></div>
              <div style="font-size: 16px;color: #333;">角色简介：<div style="font-size: 14px; margin-left: 20px;">{{ virtuallyCharacter.virtuallyIntro }}</div></div>
            </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="changeVu = false">取 消</el-button>
                <el-button v-if="user.virtuallyImage != ''" type="primary" @click="switchover(virtuallyCharacter.id)">切换</el-button>
                <el-button v-else type="primary" @click="select1(virtuallyCharacter.id)">选择</el-button>
              </div>
            </el-dialog>
        </div>
  </div>
</template>

<style>

.top1 {
    height: 50px;
    margin-top: 30px;
    margin-bottom: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-position-x: 270px ;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}
.dropdown12{
  margin-bottom: 20px;
  margin-left: 120px;
}
.image12{
  height: 24px;
  width: 24px;
}
.image16{
  max-width: 70px;
}
.categoryDescribe1{
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row1{
  display: flex;
  align-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
/* .grid-content bg-purple1{

} */
.image18{
  height: 130px;
  width: 130px;
  margin-left: 20px;
}





</style>
<script>
import request from '@/utils/request';
import E from 'wangeditor';
import { formatTime } from '@/utils/dateUtils';

let editor
function initWangEditor(content) {	setTimeout(() => {
  if (!editor) {
    editor = new E('#editor')
    editor.config.placeholder = '请输入内容'
    editor.config.uploadFileName = 'file'
    editor.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload'
    editor.create()
  }
  editor.txt.html(content)
}, 0)
}

export default { 
  name: 'VirtualCharacterView',
  data(){
    return{
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      options:[
      {
          value: '1',
          label: '历史名著'
        }, {
          value: '2',
          label: '动漫人物'
        }, {
          value: '3',
          label: '小说人物'
        }, {
          value: '4',
          label: '其他人物'
        }
      ],
      value: '历史名著',
      form:[],
      changeVu :false,
      dialogFormVisible :false,
      columnsInRow: 2,
      params: {
              pageNum: 1,
              pageSize: 8,
              articleTags: 2,
            },
      dropdownItems:[],
      
      //历史人物
      historyDate:[], 
      //动漫
      cartoonDate:[],
      //小说
      novelDate:[],
      //其他
      otherDate:[],
      //虚拟人物
      virtuallyCharacter: '',
      //我创建的
      myCreateDate:[],
      //最近创建的
      lastCreateDate:[],
      //使用过的
      usedDate:[],

      };
    },
     // 页面加载的时候，做一些事情，在created里面

    created() {
      this. load()
    },
    // 定义一些页面上控件出发的事件调用的方法
    methods: {
      
      formatTime,
      load(){
        this.fetchData();
        this.category();
        this.usedDate1();
      },
      fetchData(){
        this.historyDate=[];
        this.cartoonDate=[]; 
        this.novelDate=[]; 
        this.otherDate=[];
        this.myCreateDate=[];
        this.lastCreateDate=[];
        const currentDate = new Date();
          // 计算一周前的日期
        const oneWeekAgo = new Date();
        oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
        request.get("/virtualCharacter/findAll")
        .then(res=>{
          if (res.code === 1) {
            res.data.forEach(item => {
              const itemDate = new Date(item.createDate); 
              if(item.virtuallyType === '1'){
                this.historyDate.push(item)
              }
              if(item.virtuallyType === '2'){
                this.cartoonDate.push(item)
              }
              if(item.virtuallyType === '3'){
                this.novelDate.push(item)
              }
              if(item.virtuallyType === '4'){
                this.otherDate.push(item)
              }
              if(item.createBy === this.user.userId){
                this.myCreateDate.push(item)
              }
              if(itemDate >= oneWeekAgo && itemDate <= currentDate){
                this.lastCreateDate.push(item)
              }}); }
          else{
            this.$message.error(res.msg)
          }}) 
          },
     successUpload(res) {
            this.form.virtuallyImage = res.data;
        },
      add(){
        
        //查询分类
        this.form = {};
        this.dialogFormVisible = true
      },
      category(){
        request.get("/articleCategory/findAll").then(res=>{
            if (res.code === 1) {
                    this.dropdownItems = res.data;
                }
                else{
                    this.$message.error(res.msg)
                }
          })
      },
      handleCommand(command) {
      // 处理下拉菜单点击事件
      this.form.articleCategoryId=command;
    },
    submit(obj){
      this.form.userId=this.user.userId;
      request.post("/virtualCharacter/create",this.form).then(res=>{
        if(res.code === 1){
                    this.$message ({
                        message:"操作成功",
                        type:"success"
                    });
                    this.fetchData();
                    this.dialogFormVisible = false;
                }else{
                    this.$message ({
                        message:res.msg,
                        type:"error"
                    });
                }
      })
    },
    changeV(id){
      this.changeVu = true,
      console.info(id)
      request.get("/virtualCharacter/findById/"+ id).then(res=>{
        if(res.code === 1){
          this.virtuallyCharacter=res.data
        }else{
          this.$message ({
                        message:res.msg,
                        type:"error"
                    });
        }
      })
    },
    switchover(str){
      //切换的话只用传要切换到的虚拟角色id
      let userInfo={
        status: 1,
        virtuallyId : str,
      };
      if(str=== this.user.virtuallyId){
        this.$message.warning("正在使用当前角色，请选着其他角色")
      }else{
        request.post("/admin/switchover",userInfo).then(res=>{
        if(res.code === 1){
          this.usedDate1();
          let data1 =localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {};
          data1.personal = res.data.personalSignature;
          data1.virtuallyId=res.data.id;
          data1.virtuallyImage=res.data.virtuallyImage;
          data1.virtuallyName=res.data.virtuallyName;
          localStorage.setItem("user",JSON.stringify(data1))
          this.changeVu=false;
        }else{
          this.$message.error(res.msg)
        }

      })
    }
    },
    select1(str){
      //选择的话，
      let userInfo={
        status: 2,
        virtuallyId : str,
      };
      request.post("/admin/switchover",userInfo).then(res=>{
        if(res.code === 1){
          this.usedDate1();
          let data1 =localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {};
          data1.personal = res.data.personalSignature;
          data1.virtuallyId=res.data.id;
          data1.virtuallyImage=res.data.virtuallyImage;
          data1.virtuallyName=res.data.virtuallyName;
          localStorage.setItem("user",JSON.stringify(data1))
          this.changeVu=false;
        }else{
          this.$message.error(res.msg)
        }

      })
    },
    usedDate1(){
      request.get("/virtualCharacter/usedV").then(
        res=>{
          if(res.code === 1){
            this.usedDate = res.data;
          }else{
            this.$message.error(res.msg)
          }
        }
      )
    }
  }
}

</script> 